<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>UMEDITOR 自定义插件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../themes/default/_css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
    <script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        h1{
            font-family: "微软雅黑";
            font-weight: normal;
        }
    </style>
</head>
<body>
<h1>UMEDITOR 自定义插件</h1>

<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:800px;height:240px;">
    <p>插件描述：单击编辑区域,弹出输入框,可插入内容到编辑器！</p>
</script>
<script type="text/javascript">
    //创建一个在选中的图片单击时添加边框的插件，其实质就是在baidu.editor.plugins塞进一个闭包
    UM.plugins["showmsg"] = function () {
        var me = this;
        //执行命令
        me.commands["showmsg"] = {
            execCommand:function () {
                me.execCommand( "inserthtml",prompt('自定义插件实现插入内容:','请填写要插入的内容') );
            }
        };
        //注册一个触发命令的事件，同学们可以在任意地放绑定触发此命令的事件
        me.addListener( 'click', function () {
            setTimeout(function(){
                me.execCommand( "showmsg" );
            })

        } );
    };

    var ums = UM.getEditor('myEditor');
</script>

</body>
</html>